<template>  
    <div class="borrow-management">  
      <h2>借阅管理</h2>  
    
      <div class="borrowed-books">  
        <h3>当前借阅的书籍</h3>  
        <table>  
          <thead>  
            <tr>  
              <th>用户</th>  
              <th>书籍</th>  
              <th>借阅日期</th>  
              <th>归还日期</th>  
              <th>操作</th>  
            </tr>  
          </thead>  
          <tbody>  
            <tr v-for="(borrow, index) in borrowedBooks" :key="index">  
              <td>{{ borrow.user }}</td>  
              <td>{{ borrow.bookTitle }}</td>  
              <td>{{ borrow.borrowDate }}</td>  
              <td>{{ borrow.returnDate }}</td>  
              <td>  
                <button @click="renewBook(borrow)">续借</button>  
                <button @click="returnBook(borrow)">归还</button>  
              </td>  
            </tr>  
          </tbody>  
        </table>  
      </div>  
     
      <div class="borrow-book-form">  
        <h3>借阅新书</h3>  
        <form @submit.prevent="borrowBook">  
          <div>  
            <label for="user">用户:</label>  
            <input type="text" v-model="newBorrow.user" required />  
          </div>  
          <div>  
            <label for="bookId">书籍ID:</label>  
            <input type="text" v-model="newBorrow.bookId" required />  
          </div>  
          <button type="submit">借阅</button>  
        </form>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        borrowedBooks: [  
          // { user: '张三', bookTitle: 'Vue 3 实战', borrowDate: '2024-10-01', returnDate: '2024-10-15' },  
          // { user: '李四', bookTitle: 'JavaScript 高级编程', borrowDate: '2024-10-02', returnDate: '2024-10-20' }  
        ],  
        newBorrow: {  
          user: '',  
          bookId: ''  
        }  
      };  
    },  
    methods: {  
      borrowBook() {    
        const newBook = {  
          user: this.newBorrow.user,  
          bookTitle: '示例书籍' + this.newBorrow.bookId,   
          borrowDate: new Date().toLocaleDateString(),  
          returnDate: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).toLocaleDateString() 
        };  
        this.borrowedBooks.push(newBook);  
        this.newBorrow.user = '';  
        this.newBorrow.bookId = '';  
        alert('借阅成功！');  
      },  
      renewBook(borrow) {    
        borrow.returnDate = new Date(new Date(borrow.returnDate).getTime() + 7 * 24 * 60 * 60 * 1000).toLocaleDateString();  
        alert('续借成功！');  
      },  
      returnBook(borrow) {    
        const index = this.borrowedBooks.indexOf(borrow);  
        if (index !== -1) {  
          this.borrowedBooks.splice(index, 1);  
        }  
        alert('归还成功！');  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .borrow-management {  
    max-width: 800px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
  }  
    
  .borrowed-books, .borrow-book-form {  
    margin-bottom: 20px;  
  }  
    
  h3 {  
    margin-top: 0;  
  }  
    
  table {  
    width: 100%;  
    border-collapse: collapse;  
  }  
    
  th, td {  
    border: 1px solid #ddd;  
    padding: 8px;  
    text-align: left;  
  }  
    
  th {  
    background-color: #f2f2f2;  
  }  
    
  form div {  
    margin-bottom: 15px;  
  }  
    
  label {  
    display: inline-block;  
    width: 120px;  
  }  
    
  input {  
    width: calc(100% - 130px);  
    padding: 8px;  
    box-sizing: border-box;  
  }  
    
  button {  
    padding: 10px 20px;  
    cursor: pointer;  
    background-color: #42b983;  
    color: white;  
    border: none;  
    border-radius: 4px;  
    margin-right: 5px;  
  }  
    
  button:hover {  
    background-color: #36976f;  
  }  
  </style>